<!--
 * @Author: your name
 * @Date: 2021-02-19 14:25:03
 * @LastEditTime: 2021-04-23 23:36:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \guzheng\src\views\pages\index.vue
-->
<template>
  <div class="main">
    <el-container>
      <el-header><div style="letter-spacing:6px"><h1>青少年趣味古筝学习交流平台</h1></div> 
        <div class="middle">
              <img
                src="../../assets/images/头尾背景图.jpg"
                style="width: 100%; height: 60px"
              />
            </div>
      </el-header>
      <el-container style="height: 565px">
        <el-aside width="300px">
          <el-scrollbar class="page-scroll">
            <el-menu
              router
              :default-active="this.$route.path"
              class="left"
              @open="handleOpen"
              @close="handleClose"
              background-color="transparent"
              text-color="black"
              active-text-color="#5F9EA0"
            >
              <el-menu-item index="/index/main">
                <i class="el-icon-location"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-submenu index="/introduction">
                <template slot="title">
                  <i class="el-icon-view"></i>
                  <span>古筝介绍模块</span>
                </template>
                <el-submenu index="/introduction/brief">
                  <template slot="title">古筝概述</template>
                  <el-menu-item index="/introduction/brief/intro-brief"
                    >古筝简介</el-menu-item
                  >
                  <el-menu-item index="/introduction/brief/intro-development">发展历程</el-menu-item>
                  <el-menu-item index="/introduction/brief/intro-genre">主要流派</el-menu-item>
                  <el-menu-item index="/introduction/brief/intro-material">古筝材质</el-menu-item>
                  <el-menu-item index="/introduction/brief/intro-pictures">古筝图片欣赏</el-menu-item>
                </el-submenu>
                <el-menu-item index="/introduction/intro-structure"
                  >古筝结构详述</el-menu-item
                >
                <el-menu-item index="/introduction/intro-tone">古筝琴音详述</el-menu-item>
                <el-menu-item index="/introduction/intro-differ">古筝与古琴的区别与联系</el-menu-item>
              </el-submenu>
              <el-submenu index="/learning">
                <template slot="title">
                  <i class="el-icon-reading"></i>
                  <span>学习模块</span>
                </template>
                <el-submenu index="/learning/learn-prepare">
                  <template slot="title">古筝演奏前准备</template>
                  <el-menu-item index="/learning/learn-prepare/learn-prepare-strings">古筝调弦</el-menu-item>
                  <el-menu-item index="/learning/learn-prepare/learn-prepare-toning">古筝调音</el-menu-item>
                  <el-menu-item index="/learning/learn-prepare/learn-prepare-switching">调式间转换</el-menu-item>
                  <el-menu-item index="/learning/learn-prepare/learn-prepare-nails">装戴古筝指甲</el-menu-item>
                </el-submenu>
                <el-submenu index="/learning/learn-techn">
                  <template slot="title">古筝演奏技巧</template>
                  <el-menu-item index="/learning/learn-techn/learn-techn-basic"
                    >基本演奏技法及练习曲</el-menu-item
                  >
                  <el-menu-item index="/learning/learn-techn/learn-techn-fingertechn">指法符号一览表</el-menu-item>
                </el-submenu>
                <el-menu-item index="/learning/learn-masterpiece">古筝名曲介绍</el-menu-item>
                <el-menu-item index="/learning/learn-levels">曲谱一级到十级大全</el-menu-item>
                <el-menu-item index="/learning/learn-maintenance">古筝养护</el-menu-item>
              </el-submenu>
              <el-menu-item index="/index/communication">
                <i class="el-icon-chat-dot-square"></i>
                <span slot="title">交流模块</span>
              </el-menu-item>
              <el-menu-item index="/index/game">
                <i class="el-icon-mouse"></i>
                <span slot="title">趣味游戏模块</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-main>
            <el-scrollbar class="page-scroll">
              <div class="breadcrumb">
                <BreadCrumb/>
              </div>
              <router-view />
              <div class="el-backtop" style="right: 40px; bottom: 60px">
                <i class="el-icon-caret-top"></i>
              </div>
            </el-scrollbar>
          </el-main>
          <el-footer>
            <div class="Copyright">
              <font size="2" color="#5F9EA0"
                >Copyright © 2021 青少年趣味古筝学习交流平台开发者
                版权所有</font
              ><br />
              <center><hr style="width:50%;align：center" /></center>
               <img src="../../assets/images/二维码.jpg" width="60px" height="60px" 
               style="position:absolute; left:300px; top:90%;">
              <font size="1" color="black"
                >热线：13698001625 &nbsp;&nbsp;&nbsp;&nbsp; 邮箱：<a
                  href="mailto:2651852519@qq.cn"
                  >2651852519@qq.com</a
                ></font
              ><br />
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import BreadCrumb from '../../component/breadcrumb.vue';
export default {
  name: "index",
  data() {
    return {
      backgroundDiv: {
        backgroundImage:
          "url(" + require("../../assets/images/头尾背景图.jpg") + ")",
      },
    };
  },
  components: { BreadCrumb },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.main {
  height: 100vh;
}
.el-container {
  height: 100%;
}

.el-avatar {
  position: absolute;
  right: 20px;
  top: 10px;
}

.el-header,
.el-footer {
  padding: 0;
  background-color: #f5f7fa;
  color: rgb(15, 98, 102);
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  background-image: url("../../assets/images/头尾背景图.jpg");
}

.el-aside {
  background-image: url("../../assets/images/导航栏背景图.jpg");
  color: rgb(15, 98, 102);
  text-align: center;
  height: 100%;
}
.left {
  width: 300px;
  background: no-repeat center top;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  position: relative;
  padding: 0 20px;
}
.middle {
  height: 60px;
  width: 100%;
  background: no-repeat center top;
  opacity: 0.1;
  position: absolute;
  top: 0;
}

.el-backtop {
  position: fixed;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  cursor: pointer;
  z-index: 5;
}

::v-deep .el-submenu__title,
.el-menu-item {
  text-align: left;
}

.page-scroll {
  height: 100%;
}

.Copyright {
  line-height: 20px;
  text-align: center;
  margin: 10px;
  padding: 0;
}
.el-breadcrumb-item {
  color: #76c4c7;
}

.breadcrumb {
  text-align: left;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .el-scrollbar__bar.is-horizontal {
  display:none;
}
</style>